<!--
 * @Author       : jiangxiaoying
 * @Date         : 2021-01-04 10:18:13
 * @LastEditors  : jiangxiaoying
 * @LastEditTime : 2021-01-04 11:24:06
 * @FilePath     : \cloud-components\docs\pages\components\cloud-input-number\example3.vue
-->
<template>
  <div>
    <CloudInputNumber
      :default-value="1000"
      :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
      :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
      @change="onChange"
    >
    </CloudInputNumber>
    <CloudInputNumber
      :default-value="100"
      :min="0"
      :max="100"
      :formatter="(value) => `${value}%`"
      :parser="(value) => value.replace('%', '')"
      @change="onChange"
    >
    </CloudInputNumber>
  </div>
</template>

<script>
  export default {
    title: '3.格式化展示 ',
    subTitle: '通过 formatter 格式化数字，以展示具有具体含义的数据，往往需要配合 parser 一起使用。',
    data () {
      return {
      }
    },
    methods: {
      onChange (value) {
        console.log('changed', value);
      },
    }
  }
</script>

<style lang="scss">
</style>